<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>
    <link href="../css/common.css" rel="stylesheet" type="text/css">
    <link href="../css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/common.js"></script>
    <link href="css/login.css" rel="stylesheet" type="text/css">
    <script src="js/share.js"></script>
</head>

<body>
    <div id='app'>
        <p class="title">使用手机号登录</p>
        <div class='chen-loginpass'>
            <!-- 请输入您的手机号 -->
            <div class="loginphone">
                <div class="phone-pic">
                    <img src="img/shouji.png" alt="">
                </div>
                <input type="number" pattern="\d*" placeholder="请输入您的手机号" v-model="phone" maxlength="11">
            </div>
            <!-- 请输入验证码 -->
            <div class="loginphone logincode">
                <div class="loginph">
                    <div class="phone-pic">
                        <img src="img/yanzheng.png" alt="">
                    </div>
                    <input type="number" pattern="\d*" placeholder="请输入验证码" v-model="code">
                </div>
                <div class="sendcode sendactive" v-if="codefalse">重新发送<span>({{timecode}}s)</span></div>
                <div class="sendcode" v-else @click="centercode()">发送验证码</div>
            </div>
            <!-- 点击登录 -->
            <div class="but" v-if='butfalse' @click="logincode()">登录</div>
            <div class="but" v-else>登录</div>
        </div>

        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="../img/load.gif" alt="">
            </div>
        </div>

    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/vue-router.js"></script>
    <script type="text/javascript" src="../js/layer.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                chenload: false,
                showload: false,
                phone: '',
                code: '',
                butfalse: true,
                codefalse: false,
                timecode: 60,
            },
            methods: {
                // 点击登录
                logincode() {
                    var that = this;
                    if (!(/^1\d{10}$/.test(that.phone))) {
                        layer.open({
                            content: '请输入正确的手机号',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else if (that.code == '') {
                        layer.open({
                            content: '请输入验证码',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    } else {
                        that.showload = true;
                        var data = {
                            phone: that.phone,
                            token: '12345',
                            code: that.code
                        }
                        sharerequest.postMethod("crmapi/User/login", data, 1, (res) => {
                            if (Number(res.errcode) == 0) {
                                localStorage.setItem('erp_phone', that.phone);
                                layer.open({
                                    content: '登录成功',
                                    skin: 'msg',
                                    time: 2 //1秒后自动关闭
                                });
                                window.location.href = 'index.html'
                                    // that.$router.go(-1);
                                    // window.history.go(-1);
                            } else {
                                layer.open({
                                    content: res.msg,
                                    skin: 'msg',
                                    time: 2 //1秒后自动关闭
                                });
                            }
                            that.showload = false;
                        })
                    }
                },
                // 发送验证码
                centercode() {
                    var that = this;
                    if ((/^1\d{10}$/.test(that.phone))) {
                        that.showload = true;
                        var data = {
                            tel: that.phone,
                            from: 1,
                        }
                        sharerequest.postMethod("crmapi/User/smsCode", data, 1, (res) => {
                            if (Number(res.errcode) == 0) {
                                that.codefalse = true;
                                var times = 60;
                                var timer = setInterval(function() {
                                    times--;
                                    that.timecode = times
                                    if (times <= 0) {
                                        clearInterval(timer);
                                        that.codefalse = false;
                                    }
                                }, 1000)
                            } else {
                                layer.open({
                                    content: res.msg,
                                    skin: 'msg',
                                    time: 2 //1秒后自动关闭
                                });
                            }
                            that.showload = false;
                        })
                    } else {
                        layer.open({
                            content: '请输入正确的手机号',
                            skin: 'msg',
                            time: 2 //1秒后自动关闭
                        });
                    }
                }

            },
            mounted() {

            }
        })
    </script>
</body>

</html>